<template>
  <div>
    <el-row :gutter="props.space" class="main-video">
      <el-col
        v-for="item in videoNum"
        :key="item"
        :span="getSpan(videoNum)"
        class="video-container"
      >
        <div :id="'Player_' + item" class="video-item"></div>
        <el-button
          type="primary"
          icon="el-icon-camera"
          @click="takeSnapshot(item)"
          class="snapshot-btn"
        >
          截屏
        </el-button>
      </el-col>
    </el-row>
    <template v-if="videoNum === 0">
      <div>暂无视频数据</div>
    </template>
  </div>
</template>

<script setup>
import { nextTick, watchEffect, ref, onBeforeUnmount } from "vue";
import { ElMessage } from "element-plus";
const props = defineProps({
  videoUrl: {
    type: Array,
    default: () => [],
  },
  lineType: {
    type: String,
    default: "alone",
    validator: (value) =>
      ["alone", "fourWays", "nineWays", "sixteen"].includes(value)
        ? true
        : "无效参数",
  },
  space: {
    type: Number,
    default: 5,
  },
  margin: {
    type: Number,
    default: 2,
  },
  isBackPlay: {
    type: Boolean,
    default: true,
  },
});

const MHeight = ref(window.innerHeight - 84);
const videoNum = ref(0);
const BigClass = ref();
const videoList = ref({});

// 初始化视频播放器
const init = () => {
  switch (props.lineType) {
    case "alone":
      videoNum.value = 1;
      break;
    case "fourWays":
      videoNum.value = 4;
      break;
    case "nineWays":
      videoNum.value = 9;
      break;
    case "sixteen":
      videoNum.value = 16;
      break;
    default:
      videoNum.value = 1;
      break;
  }

  nextTick(() => {
    if (videoNum.value > 0) {
      for (let i = 0; i < videoNum.value; i++) {
        if (i < props.videoUrl.length) {
          const dom = new WasmPlayer(null, "Player_" + (i + 1), null);
          dom.play(props.videoUrl[i], 1);
          videoList.value["Player_" + (i + 1)] = dom;
          updatePlayerDomSize(i + 1);
        }
      }
      visibilitychange();
    }
  });
};

// 更新播放器大小
const updatePlayerDomSize = (id) => {
  let ways = 1;
  switch (videoNum.value) {
    case 1:
      ways = 1;
      break;
    case 4:
      ways = 2;
      break;
    case 9:
      ways = 3;
      break;
    case 16:
      ways = 4;
      break;
  }
  let dom = document.getElementById("Player_" + id);
  dom.style.height =
    (MHeight.value - props.space * (ways - 1) - props.margin * 2) / ways + "px";
  dom.style.paddingTop = 0;
};

// 截屏功能
const takeSnapshot = (id) => {
  const player = videoList.value["Player_" + id];
  if (player) {
    const snapshot = player.snapshot();
    if (snapshot) {
      // 显示快照成功信息
      ElMessage.success("快照成功！");
    } else {
      ElMessage.error("快照失败！");
    }
  }
};

// 监听浏览器的显隐
const visibilitychange = () => {
  if (props.isBackPlay) return;
  document.addEventListener("visibilitychange", function () {
    if (document.visibilityState === "hidden") {
      for (let key in videoList.value) {
        videoList.value[key].pause();
      }
    }
    if (document.visibilityState === "visible") {
      for (let key in videoList.value) {
        videoList.value[key].play(videoList.value[key].url, 1);
      }
    }
  });
};

// 动态计算布局
const getSpan = (videoNum) => {
  switch (videoNum) {
    case 1:
      return 24;
    case 4:
      return 12;
    case 9:
      return 8;
    case 16:
      return 6;
  }
};

watchEffect(() => {
  init();
});

onBeforeUnmount(() => {
  for (let key in videoList.value) {
    videoList.value[key].destroy();
  }
  if (!props.isBackPlay) {
    document.removeEventListener("visibilitychange", visibilitychange);
  }
});
</script>

<style scoped>
.main-video {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.video-container {
  position: relative;
  height: 100%;
}
.video-item {
  width: 100%;
  height: 100%;
  background-color: #000;
  border-radius: 5px;
}
.snapshot-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
</style>
